import React  from 'react'
import PropTypes from 'prop-types'
import { Upload, Modal,message } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import {BASE_IMG_URL} from '@/utils/constant'
import { reqDeleteImg } from '@api/product'
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = error => reject(error)
  });
}
/*
用于图片上传的组件
*/

export default class PicturesWall extends React.Component {
  static propTypes = {
      imgs:PropTypes.array
  }
  state = {
    previewVisible: false,  // 标识是否显示大图预览界面Modal
    previewImage: '',       // 大图的URL
    previewTitle: '',
    fileList: [],
  }
  constructor(props){
      super(props)
      const {imgs} = this.props
      let fileList = []
         // 如果传入了imgs属性
    if (imgs && imgs.length>0) {
      fileList = imgs.map((img, index) => ({
        uid: -index, // 每个file都有自己唯一的id
        name: img, // 图片文件名
        status: 'done', // 图片状态: done-已上传, uploading: 正在上传中, removed: 已删除
        url: BASE_IMG_URL + img
      }))
    }
    // 初始化状态
    this.state = {
        previewVisible: false, // 标识是否显示大图预览Modal
        previewImage: '', // 大图的url
        fileList // 所有已上传图片的数组
      }
  }
  componentDidMount(){
  }
//   获取图片的名字等下交给表单提交
  getImgs=()=>{
      return this.state.fileList.map(file=>file.name)
  }
  handleCancel = () => this.setState({ previewVisible: false });

  handlePreview = async file => {
    //   显示指定file的预览图
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj);
    }

    this.setState({
      previewImage: file.url || file.preview,
      previewVisible: true,
      previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
    })
  }
    //  上传中、完成、失败都会调用这个函数。
    /*  file：当前操作的图片文件（上传/删除）
        fileList：所有已上传图片文件对象的数组
    */
  handleChange =async ({ file,fileList }) => {
    // 上传成功 图片在fileList的最后一张对上传的file信息修正
    if(file.status==='done'){
      const result = file.response
      if(result.status === 0){
        const {name,url} = result.data
        file = fileList[fileList.length-1]
        file.name = name
        file.url = url  
        message.success('图片上传成功')
      }else{
          message.error('图片上传失败')
      }
    }
    // 用户移除 我们也要相应移除数据库暂存的
    if(file.status === 'removed'){
        const result = await reqDeleteImg(file.name)
        if(result.status === 0){
          message.success('删除图片成功')
        }else{
          message.error('删除图片失败')
        }
    }
    console.log(file,fileList)
    this.setState({ fileList })
    }

  render() {
    const { previewVisible, previewImage, fileList, previewTitle } = this.state
    const uploadButton = (
      <div>
        <PlusOutlined />
        <div style={{ marginTop: 8 }}>Upload</div>
      </div>
    );
    return (
      <>
        {/* 只接受图片 卡片样式 */}
        <Upload action="http://120.55.193.14:5000/manage/img/upload" name='image' listType="picture-card" fileList={fileList} onPreview={this.handlePreview} onChange={this.handleChange} accept='image/*' >
          {fileList.length >= 3 ? null : uploadButton}
        </Upload>
        <Modal visible={previewVisible} title={previewTitle} footer={null} onCancel={this.handleCancel} >
          <img alt="example" style={{ width: '100%' }} src={previewImage} />
        </Modal>
      </>
    );
  }
}
/*
1、子组件调用父组件的方法：将父组件的方法以函数属性的形式传递给子组件，子组件就可以调用
2、父组件调用子组件的方法：在父组件中通过ref得到子组件标签对象（也就是组件对象），调用其方法。
*/
